<template>
  <div class="control-panel">
    <!-- 统计卡片 -->
    <div class="statistics-container flex flex-wrap gap-4 mb-4">
      <el-card
        v-for="item in statisticsData"
        :key="item.title"
        shadow="hover"
        class="statistics-card flex-1 min-w-[250px]"
      >
        <div class="flex items-center justify-between">
          <div class="flex-1">
            <div class="text-gray-500 mb-2">{{ item.title }}</div>
            <div class="text-2xl font-bold">{{ item.value }}</div>
          </div>
          <el-icon :size="40" :class="item.iconClass">
            <component :is="item.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 中间卡片区域 -->
    <div class="middle-container flex flex-wrap gap-4 mb-4">
      <!-- 快捷操作 -->
      <el-card shadow="hover" class="flex-1 min-w-[300px]">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-bold">快捷操作</span>
          </div>
        </template>
        <div class="quick-actions grid grid-cols-2 gap-4">
          <el-card
            v-for="action in quickActions"
            :key="action.title"
            :type="action.type"
            class="h-[80px] flex flex-col items-center justify-center cursor-pointer hover:scale-105 transition-transform"
            @click="action.handler"
          >
            <el-icon :size="24" class="mb-2">
              <component :is="action.icon" />
            </el-icon>
            <span>{{ action.title }}</span>
          </el-card>
        </div>
      </el-card>

      <!-- 系统信息 -->
      <el-card shadow="hover" class="flex-1 min-w-[300px]">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-bold">系统信息</span>
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item
            v-for="item in systemInfo"
            :key="item.label"
            :label="item.label"
          >
            {{ item.value }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 操作教程 -->
      <el-card shadow="hover" class="flex-1 min-w-[300px]">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-bold">使用文档</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="activity in recentActivities"
            :key="activity.id"
            :type="activity.type"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <!-- 日志展示区域 -->
    <div class="logs-container flex flex-wrap gap-4">
      <!-- 登录日志 -->
      <el-card shadow="hover" class="flex-1 min-w-[400px]">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-bold">最近登录记录</span>
            <el-button text @click="router.push('/loginLog')"
              >查看更多</el-button
            >
          </div>
        </template>
        <el-table :data="loginLogs" style="width: 100%" size="small">
          <el-table-column
            prop="admin_id"
            label="管理员ID"
            width="100"
            align="center"
          />
          <el-table-column
            prop="login_time"
            label="登录时间"
            min-width="180"
            align="center"
          />
          <el-table-column
            prop="login_ip"
            label="登录IP"
            min-width="140"
            align="center"
          />
          <el-table-column
            prop="login_status"
            label="状态"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-tag
                :type="row.login_status === 1 ? 'success' : 'danger'"
                effect="plain"
              >
                {{ row.login_status === 1 ? "成功" : "失败" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="login_description"
            label="描述"
            min-width="200"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
      </el-card>

      <!-- 操作日志 -->
      <el-card shadow="hover" class="flex-1 min-w-[400px]">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-bold">最近操作记录</span>
            <el-button text @click="router.push('/operationLog')"
              >查看更多</el-button
            >
          </div>
        </template>
        <el-table :data="operationLogs" style="width: 100%" size="small">
          <el-table-column
            prop="admin_id"
            label="管理员ID"
            width="100"
            align="center"
          />
          <el-table-column
            prop="operation_time"
            label="操作时间"
            min-width="180"
            align="center"
          />
          <el-table-column
            prop="operation_details"
            label="操作详情"
            min-width="100"
            align="center"
          />
          <el-table-column
            prop="operation_status"
            label="状态"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-tag
                :type="row.operation_status === 1 ? 'success' : 'danger'"
                effect="plain"
              >
                {{ row.operation_status === 1 ? "成功" : "失败" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="operation_description"
            label="描述"
            min-width="200"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  User,
  Setting,
  List,
  Document,
  Key,
  Monitor,
  Operation,
  Refresh,
  Coordinate,
  Guide,
  Finished,
  UserFilled
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {
  getOperationLogByPage,
  getLoginLogByPage,
  getStatistics
} from "@/api/index";

// 获取路由实例
const router = useRouter();

// 统计数据
const statisticsData = ref([
  {
    title: "总人员数",
    value: "1000",
    icon: User,
    iconClass: "text-blue-500"
  },
  {
    title: "系统角色",
    value: "1000",
    icon: Monitor,
    iconClass: "text-green-500"
  },
  {
    title: "系统权限",
    value: "1000",
    icon: Key,
    iconClass: "text-yellow-500"
  },
  {
    title: "操作日志",
    value: "1000",
    icon: Operation,
    iconClass: "text-purple-500"
  }
]);

// 格式化数字的工具函数
const formatNumber = num => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

const formatLargeNumber = num => {
  if (num >= 100000000) {
    return (num / 100000000).toFixed(2) + "亿";
  } else if (num >= 10000) {
    return (num / 10000).toFixed(2) + "万";
  }
  return formatNumber(num);
};

// 获取统计数据
const fetchStatisticsData = async () => {
  try {
    const res = await getStatistics();
    if (res.status === "success" && res.data) {
      const { records, system } = res.data;

      // 计算总用户数
      const totalUsers =
        records.data_undergraduate +
        records.data_postgraduate +
        records.data_staff +
        records.data_external_staff +
        records.data_ugscma_postgraduate;

      // 更新统计数据
      statisticsData.value[0].value = formatLargeNumber(totalUsers);
      statisticsData.value[1].value = formatLargeNumber(system.table_role);
      statisticsData.value[2].value = formatLargeNumber(
        system.table_permission
      );
      statisticsData.value[3].value = formatLargeNumber(
        system.table_admin_operation_log
      );
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

// 快捷操作
const quickActions = ref([
  {
    title: "角色管理",
    icon: UserFilled,
    type: "success",
    handler: () => {
      router.push("/controlRole");
    }
  },
  {
    title: "管理员管理",
    icon: Coordinate,
    type: "warning",
    handler: () => {
      router.push("/controlAdminer");
    }
  }
]);

// 系统信息
const systemInfo = ref([
  { label: "系统名称", value: "河南农业大学人员组织管理系统" },
  { label: "系统版本", value: "v1.0.0" },
  { label: "上线时间", value: "2025-02-12" },
  { label: "系统时间", value: new Date().toLocaleString() }
]);

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    content: "人员管理",
    type: "primary"
  },
  {
    id: 2,
    content: "角色管理",
    type: "success"
  },
  {
    id: 3,
    content: "管理员管理",
    type: "info"
  }
]);

// 日志数据
const loginLogs = ref([]);
const operationLogs = ref([]);

// 获取登录日志
const fetchLoginLogs = async () => {
  try {
    const res = await getLoginLogByPage({
      page: 1,
      size: 5
    });
    if (res.status === "success") {
      loginLogs.value = res.data.records;
    }
  } catch (error) {
    console.error("获取登录日志失败:", error);
  }
};

// 获取操作日志
const fetchOperationLogs = async () => {
  try {
    const res = await getOperationLogByPage({
      page: 1,
      size: 5
    });
    if (res.status === "success") {
      operationLogs.value = res.data.records;
    }
  } catch (error) {
    console.error("获取操作日志失败:", error);
  }
};

onMounted(() => {
  fetchStatisticsData();
  fetchLoginLogs();
  fetchOperationLogs();
});
</script>

<style lang="scss" scoped>


@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@media screen and (width <= 1400px) {
  .control-panel {
    .middle-container {
      > .el-card {
        min-width: calc(50% - 1rem);
      }
    }
  }
}

@media screen and (width <= 768px) {
  .control-panel {
    .statistics-container {
      > .el-card {
        min-width: 100%;
      }
    }

    .middle-container,
    .logs-container {
      > .el-card {
        min-width: 100%;
      }
    }
  }
}

.control-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;

  :deep(.el-card) {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
    transition: all 0.3s ease-in-out;

    &:hover {
      box-shadow: 0 8px 25px rgb(0 0 0 / 12%);
      transform: translateY(-8px);
    }

    .el-card__header {
      border-bottom: 1px solid rgb(0 0 0 / 5%);

      .font-bold {
        font-size: 1.1rem;
        color: #1890ff;
      }
    }
  }

  .statistics-card {
    overflow: hidden;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 25px rgb(0 0 0 / 12%);
      transform: translateY(-8px);

      .el-icon {
        animation: float 2s ease-in-out infinite;
      }
    }

    .text-gray-500 {
      font-size: 1rem;
      font-weight: 500;
      color: #666;
    }

    .text-2xl {
      font-size: 2rem;
      font-weight: 600;
      background: linear-gradient(120deg, #1890ff, #36cfc9);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .el-icon {
      opacity: 0.9;
      transition: all 0.3s ease;
    }
  }

  .quick-actions {
    .el-card {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      border: 1px solid rgb(24 144 255 / 10%);
      transition: all 0.3s ease;

      .el-icon {
        color: #666;
        transition: all 0.3s ease;
      }

      span {
        font-weight: 500;
        color: #666;
        transition: all 0.3s ease;
      }

      &:hover {
        border-color: #1890ff;
        box-shadow: 0 8px 25px rgb(24 144 255 / 15%);
        transform: translateY(-3px);

        .el-icon {
          color: #1890ff;
          transform: scale(1.2) rotate(10deg);
        }

        span {
          color: #1890ff;
        }
      }
    }
  }

  :deep(.el-timeline-item__content) {
    padding: 8px 12px;
    font-size: 0.95rem;
    color: #666;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      color: #1890ff;
      background: rgb(24 144 255 / 10%);
      transform: translateX(8px);
    }
  }

  :deep(.el-descriptions) {
    .el-descriptions-item__label {
      width: 120px;
      font-weight: 500;
      color: #666;
      background: rgb(248 249 250 / 80%);
    }

    .el-descriptions-item__content {
      padding: 12px 16px;
      color: #333;
      transition: all 0.3s ease;

      &:hover {
        color: #1890ff;
        background: rgb(24 144 255 / 5%);
        transform: translateX(8px);
      }
    }
  }

  :deep(.el-table) {
    .el-table__header {
      th {
        font-weight: bold;
        color: #1890ff;
        background-color: rgb(24 144 255 / 5%);
      }
    }

    .el-table__row {
      transition: all 0.3s ease;

      &:hover {
        background-color: rgb(24 144 255 / 5%);
        transform: scale(1.01);

        td {
          color: #1890ff;
        }
      }
    }
  }
}

/* 响应式样式 */
</style>
